<template>
  <div class="app-container">
    <!-- 标题 -->
    <h2>2.3 会员管理</h2>
    <h3>会员注册信息</h3>

    <!-- 搜索区域 -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="主体名称">
        <el-input v-model="queryParams.companyName" placeholder="请输入主体名称" clearable />
      </el-form-item>
      <el-form-item label="注册手机号">
        <el-input v-model="queryParams.mobilePhone" placeholder="请输入注册手机号" clearable />
      </el-form-item>
      <el-form-item label="是否会员">
        <el-select v-model="queryParams.memberFlag" placeholder="请选择是否会员" clearable>
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="queryParams.userStatus" placeholder="请选择用户状态" clearable>
          <el-option label="正常" :value="1" />
          <el-option label="冻结" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="success" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ref="table"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="companyName" label="主体名称" />
      <el-table-column prop="mobilePhone" label="注册手机号" />
      <el-table-column prop="registerTime" label="注册时间" />
      <el-table-column label="营业执照" align="center">
        <template><!--            src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650"-->
          <image-preview

            src ="https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con"
            width="50" height="80" />
        </template>
      </el-table-column>
      <el-table-column prop="memberFlag" label="是否会员">
        <template #default="{ row }">
          <el-tag :type="parseInt(row.memberFlag) === 1 ? 'success' : 'info'">{{ parseInt(row.memberFlag) === 1 ? '会员' : '非会员' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="perfectFlag" label="信息是否完善">
        <template #default="{ row }">
          <el-tag :type="parseInt(row.perfectFlag) === 1 ? 'success' : 'warning'">{{ parseInt(row.perfectFlag) === 1 ? '已完善' : '未完善' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="userStatus" label="用户状态">
        <template #default="{ row }">
          <el-tag :type="parseInt(row.userStatus) === 1 ? 'success' : 'danger'">{{ parseInt(row.userStatus) === 1 ? '正常' : '冻结' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
            <span class="el-dropdown-link">
              更多<i class="el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="{action: 'detail', row: row}">详情</el-dropdown-item>
                <!--                <el-dropdown-item :command="{action: 'delete', row:row }" @click= "handleDelete" >删除</el-dropdown-item>-->
                <el-dropdown-item :command="{action: 'delete', row:row }" @click= "handleDelete" >删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;"
    />

    <!-- 批量操作提示 -->
    <div v-if="selectedRows.length > 0" class="batch-operation">
      已选择 {{ selectedRows.length }} 条
      <el-button size="small" @click="clearSelection">清空</el-button>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="500px">
      <el-form :model="editObjects" label-width="100px" :rules="editRules" ref="editObjects">
        <el-form-item label="主体名称" prop="companyName">
          <el-input v-model="editObjects.companyName" placeholder="请输入主体名称" />
        </el-form-item>

        <el-form-item label="注册手机号" prop="mobilePhone">
          <el-input v-model="editObjects.mobilePhone" placeholder="请输入注册手机号" />
        </el-form-item>

        <el-form-item label="注册时间" prop="registerTime">
          <el-input v-model="editObjects.registerTime" placeholder="请输入注册时间" disabled />
        </el-form-item>

        <el-form-item label="是否会员" prop="memberFlag">
          <el-select v-model="editObjects.memberFlag" placeholder="请选择是否会员">
            <el-option label="会员" :value="1" />
            <el-option label="非会员" :value="0" />
          </el-select>
        </el-form-item>

        <el-form-item label="用户状态" prop="userStatus">
          <el-select v-model="editObjects.userStatus" placeholder="请选择用户状态">
            <el-option label="正常" :value="1" />
            <el-option label="冻结" :value="0" />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listNjtUserRegister,updateNjtUserRegister,deleteNjtUserRegister } from "@/api/njt/user/register";
import * as http from "http";
export default {
  name: "Index",
  computed: {
    http() {
      return http
    }
  },
  data() {
    return {
      queryParams: {
        companyName: "",
        mobilePhone: "",
        memberFlag: undefined,
        userStatus: undefined,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedRows: [],
      // 编辑弹窗相关数据
      editDialogVisible: false,
      editObjects: {
        id: null,
        companyName: '',
        mobilePhone: '',
        registerTime: '',
        memberFlag: 0,
        userStatus: 1
      },
      editRules: {
        companyName: [
          {required: true, message: '主体名称不能为空', trigger: 'blur'}
        ],
        mobilePhone: [
          {required: true, message: '注册手机号不能为空', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
        ],
        memberFlag: [
          {required: true, message: '请选择是否会员', trigger: 'change'}
        ],
        userStatus: [
          {required: true, message: '请选择用户状态', trigger: 'change'}
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleExport() {
      this.download('nongjt/userRegister/export', {
        ...this.queryParams
      }, `njt_user_register_${new Date().getTime()}.xlsx`)
    },
    handleDelete(id) {
      this.$confirm('确认要删除该用户注册信息吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return deleteNjtUserRegister(id)
      }).then(() => {
        this.getList() // 删除成功后重新获取列表
        this.$message.success('删除成功')
      }).catch((error) => {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
        }
      })
    },
// handleCommand(command) {
//   console.log("更多操作", command);
//   const {action, row} = command;
//   if (action === 'detail') {
//     this.$modal.msgSuccess("查看详情，用户ID: " + row.id);
//   } else if (action === 'delete') {
//     this.handleDelete(row.id);
//   }
// },

    submitData() {
      updateNjtUserRegister(this.editObjects).then(response => {
        // 刷新表格数据
        this.getList()
        this.$modal.msgSuccess(response.msg);
        // 关闭弹窗
        this.editDialogVisible = false;
      })
    },


    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listNjtUserRegister(this.queryParams).then(response => {
        // 确保所有状态字段都是数字类型
        const rows = response.rows.map(item => {
          return {
            ...item,
            memberFlag: parseInt(item.memberFlag),
            userStatus: parseInt(item.userStatus),
            perfectFlag: parseInt(item.perfectFlag)
          };
        });
        this.tableData = rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetForm() {
      this.queryParams = {
        companyName: "",
        mobilePhone: "",
        memberFlag: undefined,
        userStatus: undefined,
        pageNum: 1,
        pageSize: 10
      };
      this.getList();
    },
    exportData() {
      console.log("导出数据");
      this.$modal.msgSuccess("导出功能演示");
      // 实现导出逻辑
    },
    handleEdit(row) {
      console.log("编辑", row);
      // 设置编辑表单数据
      this.editObjects = {
        id: row.id,
        companyName: row.companyName,
        mobilePhone: row.mobilePhone,
        registerTime: row.registerTime,
        memberFlag: parseInt(row.memberFlag),
        userStatus: parseInt(row.userStatus)
      };
      // 显示编辑弹窗
      this.editDialogVisible = true;
    },

    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    clearSelection() {
      this.$refs.table.clearSelection();
      this.selectedRows = [];
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },

    // 提交编辑表单
    // submiteditObjects() {
    //   this.$refs["editObjects"].validate(valid => {
    //     if (valid) {
    //       // 模拟提交数据
    //       console.log("提交编辑数据:", this.editObjects);
    //       this.$modal.msgSuccess("保存成功");
    //       this.editDialogVisible = false;
    //     }
    //   });
    // }
  }
};
</script>

<style scoped lang="scss">
.batch-operation {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  margin-left: 10px;
}
</style>
